<template>
  <div style="height: 100%; display: flex; flex-direction: column;">
    <BreadFadeWidget ref="refBread" :start-index="2" style="padding: 8px 4px 0 8px"
                     :root-path="config.rootItem" :detail-label="config.detail" :trigger-path="triggerPath"/>
    <TableHeaderWidget :header="current().name"/>
    <GroupList ref="refList" v-show="config.isRoot" :has-level="false"
               :entry="{server: SERVERS.REALM, name: currentNames.USER_GROUP, type: TYPES.USER_GROUP}"
               :move-group="moveGroup" :load-move-group="loadMoveGroup"/>
    <UserGroupDetail v-show="!config.isRoot" ref="refDetail"
                     :move-group="moveGroup" :load-move-group="loadMoveGroup"/>
  </div>
</template>

<script setup lang="ts" name="realmUserGroup">

import {currentNames, SERVERS, TYPES} from "@/stores/conf";
import {useListPage} from "@/utils/UseListPage";
import TableHeaderWidget from "@/widget/TableHeaderWidget.vue";
import GroupList from "@/widget/list/GroupList.vue";

import BreadFadeWidget from "@/widget/BreadFadeWidget.vue";
import UserGroupDetail from "@/views/pages/realms/UserGroupDetail.vue";

const config = {
  isRoot: true,
  detail: '分组详情',
  watchRealm: true,
  rootItem: {id: '', name: '分组列表',}
}

const {current, refBread, refList, refDetail, triggerPath} = useListPage(currentNames.USER_GROUP, config);

/**
 * 保存当前领域用户分组
 * @param group
 */
const saveGroup = async (group: any) => {
  return {
    code: 0,
  }
}

const deleteGroup = async (params: any) => {

}

const moveGroup = async (params: any) => {

}

const loadMoveGroup = async (params: any) => {

}

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

</style>
